<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .ppp {
            padding-left: 5px;
            padding-right: 5px;
            background-color: aqua;
        }

        .button {
            width: 200px;
            border: 2px black solid;
            background-color: bisque;
        }
    </style>
</head>

<body>
    <input type='text'>
    <span class='ppp'></span>
    <div class="button">点我改变obj的值</div>
</body>

<script>
    // https://segmentfault.com/a/1190000038392252
    let obj = {
        a: '0'
    };

    let ipt = document.querySelector('input');
    ipt.oninput = function () {
        obj.a = ipt.value;
    }
    let temp = obj['a'];
    //获取焦点 并且用户修改了值
    Object.defineProperty(obj, 'a', {
        enumerable: true,
        configurable: true,

        get: function () {
            return temp;
        },
        set: function (val) {
            temp = val;
            ipt.value = val;
            document.querySelector('.ppp').innerHTML = val;
        }
    })

    //当我们obj中的a属性发生变化后，input的值跟着改变
    //input的值发生变化后，obj的a属性也跟着改变
    let button = document.querySelector('.button');
    button.addEventListener('click', function () {
        let value = Math.floor(Math.random() * 10);
        console.log('改变obj的a属性');
        obj['a'] = value;
    })

</script>

</html>